<template>
	<div><div>

    <a href="#page1" @click="page='page1'" :class="{active:page=='page1'}">页面1</a>
    <a href="#page2" @click="page='page2'" :class="{active:page=='page2'}">页面2</a>
    <a href="#page3" @click="page='page3'" :class="{active:page=='page3'}">页面3</a>

    <component v-bind:is="page"></component>

    <container v-bind:pp="page"></container>


	</div></div>
</template>

<script>
import Vue from 'vue'

Vue.component('page1', { template:'<p>页面一</p>' })
Vue.component('page2', { template:'<p>页面二</p>' })
Vue.component('page3', { template:'<p>页面三</p>' })

export default {
  data () { 
    return {
      page:'page1'         
    } 
  },
  components: {      
    container: { 
      props:['pp'],render (h) {return h(this.pp);}
    },
  }
  
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}
</style>
